<!-- 
  使用js获取图像的像素矩阵 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
  大图里面找小图 https://blog.csdn.net/BoweirrKing/article/details/1955614?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%A4%A7%E5%9B%BE%E4%B8%AD%E5%AF%BB%E6%89%BE%E5%B0%8F%E5%9B%BE&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-1955614.142^v88^control_2,239^v2^insert_chatgpt&spm=1018.2226.3001.4187
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <canvas id="canvas" width="2000" height="2000"></canvas>
    <!-- <img src="./icons.png" alt="" id="img1"> -->
    <!-- <img src="./icon.png" alt="" id="img2"> -->
    <script>
        // let img1 = document.getElementById("img1");
        // let img2 = document.getElementById("img2");
        // console.log(img1);
        // console.log(img2);

        var img = new Image();
        // img.crossOrigin = 'anonymous';
        img.src = './icons.png';
        // console.log(img);
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            // console.log(img.width);
            // console.log(img.height);
            img.style.display = 'none';
            // for (let i = 1; i <= img.width; i++) {
            //     for (let j = 1; j <= img.height; j++) {
            //         let pixel = ctx.getImageData(i, j, 1, 1);

            //     }
            // }
        };

        // function pick(event, destination) {
        //     var x = event.layerX;
        //     var y = event.layerY;
        //     var pixel = ctx.getImageData(x, y, 1, 1);
        //     var data = pixel.data;

        //     const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
        //     destination.style.background = rgba;
        //     destination.textContent = rgba;

        //     return rgba;
        // }

        // canvas.addEventListener('mousemove', function (event) {
        //     pick(event, hoveredColor);
        // });
    </script>

</body>

</html>